<template>
  <div style="width: 500px">
    <table class="table-title">
        <tr>
          <td>th 1</td>
          <td>th 2</td>
          <td>th 3</td>
          <td>th 4</td>
        </tr>
        <tr>
          <td>td 1</td>
          <td>td 2</td>
          <td>td 3</td>
          <td>td 4</td>
        </tr>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {},
  mounted() {
    var pressed = false;
    var start = undefined;
    var startX, startWidth;
    let th = document.querySelectorAll('.table-title tr:first-child td');
    for (let i = 0; i < th.length; i++) {
      if(i == th.length - 1){
        continue;
      }
      th[i].onmousedown = function (e) {
        start = this;
        pressed = true;
        startX = e.pageX;
        console.log(startX);
        startWidth = this.offsetWidth;
        console.log(startWidth);
        document.onmousemove = function (e) {
          if (pressed) {
            start.style.width = startWidth + (e.pageX - startX) + 'px';
          }
        };
        document.onmouseup = function () {
          if (pressed) {
            pressed = false;
          }
        };
      };
    }
  },
};
</script>
<style lang="less" scoped>
table {
  width: 100%;
  border-left: 1px solid #000;
  border-top: 1px solid #000;
  border-collapse: collapse;
  user-select: none;
}

table td {
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

.table-title tr:first-child td{
  cursor: col-resize;
}
</style>
